import React from "react";
import { Card, Form, Input, Button, message } from "antd";
import { addBrand } from "../../../services";

export const Edit = (props) => {
  const { getFieldDecorator } = props.form;
  //   自定义表单验证
  const priceRlues = (rule, values, callback) => {
    console.log(rule);
    console.log(values * 1);
    if (values * 1 < 0) {
      callback("排序值不能小于0");
    } else {
      callback();
    }
  };
  const handleSubmit = (e) => {
    console.log(e);
    e.preventDefault();
    //   验证
    props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log(values);
        // 调用逻辑
        addBrand({
          brandName: values.name,
          sort: values.price,
          shopId: 489,
        }).then((res) => {
          console.log(res);
          if (res.code == "0") {
            message.success("新增成功");
            props.history.push("/admin/products");
          }
        });
      } else {
        message.error("请输入正确的内容");
      }
    });
  };
  return (
    <Card
      title="商品编辑"
      extra={
        <Button onClick={() => props.history.push("/admin/products")}>
          返回
        </Button>
      }
    >
      <Form onSubmit={(e) => handleSubmit(e)}>
        <Form.Item label="品牌">
          {getFieldDecorator("name", {
            rules: [
              {
                required: true,
                message: "请输入品牌名字",
              },
            ],
          })(<Input placeholder="请输入品牌名字" />)}
        </Form.Item>
        <Form.Item label="排序值">
          {getFieldDecorator("price", {
            rules: [
              {
                required: true,
                message: "请输入排序值",
              },
              {
                validator: priceRlues,
              },
            ],
          })(<Input placeholder="请输入排序值" />)}
        </Form.Item>
        <Form.Item>
          <Button htmlType="submit" type="primary">
            保存
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
};
// 这里是高阶组件用法
// 意思是创建一个name属性给edit
export default Form.create({ name: "productEdit" })(Edit);
